<template>
  <div>
    <Page auto-content-height>
      <FosoTable
        ref="FosoTableRef"
        table-title="职位管理"
        @add="addPosition"
        @delete="DeleteHandle"
        @edit="EditHandle"
      >
        <!-- <template #status="{ row }">
          <el-switch
            v-model="row.status"
            :active-value="1"
            :inactive-value="0"
            @change="handleStatusChange(row)"
          />
        </template> -->
      </FosoTable>
    </Page>
    <!-- 弹窗框 -->
    <Drawer class="w-[40%]" />
  </div>
</template>

<script setup lang="ts">
import type { PositionTypeItem } from './type';

import { ref } from 'vue';

import { Page, useVbenDrawer } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { useFosoTable, useFosoTableConfig } from '@vben/plugins/FosoTable';

import { deletePosition, getPositionList } from '#/api/sys/position';

import ExtraDrawer from './components/drawer.vue';

const TableConfig = useFosoTableConfig({
  columns: [
    {
      type: 'checkbox',
      width: 50,
    },
    {
      title: $t('sys.position.name'),
      field: 'name',
    },
    {
      title: $t('sys.position.code'),
      field: 'code',
    },
    {
      title: $t('sys.role.remark'),
      field: 'remark',
    },
    {
      title: $t('sys.department.sort'),
      field: 'sort',
    },
    // 状态
    {
      title: $t('sys.department.status'),
      field: 'status',
      slots: { default: 'status' },
    },
    // 创建时间
    {
      title: $t('sys.menu.createTime'),
      field: 'createdAt',
      width: 180,
      formatter: ['formatDate', 'yyyy-MM-dd'],
    },
    {
      title: $t('sys.menu.operation'),
      width: 200,
      slots: { default: 'operation' },
    },
  ],
  requestApi: getPositionList,
});
const { FosoTable, FosoTableApi } = useFosoTable(TableConfig);
const FosoTableRef = ref<InstanceType<typeof FosoTable>>();

// 弹窗连接
const [Drawer, drawerApi] = useVbenDrawer({
  // 连接抽离的组件
  connectedComponent: ExtraDrawer,
});

/**
 * @author Buke
 * @description 新增职位
 * @returns {void}
 */
const addPosition = (): void => {
  drawerApi.setState({ title: $t('sys.position.addPosition') });
  drawerApi.setData({ type: 'addData' });
  drawerApi.open();
};

/**
 * @author Buke
 * @description 编辑职位
 * @param {PositionInfo} row - 要编辑的行数据对象，包含职位相关信息。
 * @returns {void}
 */
const EditHandle = (row: PositionTypeItem): void => {
  drawerApi.setState({ title: $t('sys.position.editPosition') });
  drawerApi.setData({ type: 'editData', id: row.id as number });
  drawerApi.open();
};

/**
 * @author Buke
 * @description 删除职位
 * @param {any} row - 要删除的行数据。
 * @returns {void}
 */
async function DeleteHandle(row: PositionTypeItem): Promise<void> {
  await deletePosition(row.id as number);
  ElMessage.success($t('common.deleteSuccess'));
  FosoTableApi.value?.commitProxy('reload');
}
</script>
